<template>
  <div class="pr">
    <div
      id="echart4"
      style="width:26vw;height:40vh;"
    ></div>
    <RepairViewList
      :filters="filters"
      :sub_title="sub_title"
      v-model="dialog_visible"
    />
  </div>
</template>

<script>
import { init } from "echarts";
import RepairViewList from "./RepairViewList.vue";
export default {
  name: "box4",
  props: {
    chooseBatch: String,
  },
  components: {
    RepairViewList,
  },
  data() {
    return {
      dialog_visible: false,
      sub_title: null,
      filters: [],
      list: [
        { Name: "科室1", CountA: 70, CountB: 52 },
        { Name: "科室2", CountA: 80, CountB: 64 },
        { Name: "科室3", CountA: 48, CountB: 37 },
        { Name: "科室4", CountA: 71, CountB: 48 },
        { Name: "科室5", CountA: 65, CountB: 42 },
        { Name: "科室6", CountA: 59, CountB: 32 },
        { Name: "科室7", CountA: 76, CountB: 44 },
      ],
    };
  },
  myChart: null,
  async mounted() {
    // this.getData();
    this.initCharts();
  },
  methods: {
    async initCharts() {
      // const data = await this.$http.get(
      //   `/api/RepairReport/RepairLargeScreenModelBList`
      // );

      if (!this.myChart) {
        this.myChart = init(document.getElementById("echart4"));
        // this.myChart.on("click", (ev) => {
        //   this.filters = [
        //     {
        //       Name: "ApplyTime",
        //       compare: ">=",
        //       value: ev.data.Ds,
        //     },
        //     {
        //       Name: "ApplyTime",
        //       compare: "<",
        //       value: ev.data.De,
        //     },
        //   ];
        //   this.sub_title = ev.data.Week;
        //   this.dialog_visible = true;
        // });
      }
      const option = {
        grid: {
          top: 122,
          let: 24,
          right: 24,
          bottom: 107,
        },
        title: [
          {
            text: "科室盘点盈亏数据",
            top: 16,
            left: 24,
            textStyle: {
              color: "#d6e2ff",
              fontSize: 18,
              fontWeight: 400,
              fontFamily: "Microsoft YaHei",
            },
          },
          {
            text: "(单位:台)",
            top: 20,
            left: 178,
            textStyle: {
              color: "#d6e2ff",
              fontSize: 14,
              fontWeight: 400,
              fontFamily: "Microsoft YaHei",
            },
          },
        ],
        tooltip:{
          trigger:'axis',
          formatter:`{a0}:{c0}台</br>{a1}:{c1}台`
        },
        legend: {
          top: 72,
          textStyle: {
            color: "#d6e2ff",
            padding:4,
            fontSize:14
          },
          itemWidth: 14,
          itemHeight: 12,
          itemGap:16
        },
        xAxis: {
          type: "category",
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            rotate: 45,
            hideOverlap: true,
            color: "#d6e2ff",
            formatter:e=>e.length<=7?e:(e.slice(0,6)+'...'),
          },
          axisLine: {
            lineStyle: {
              color: "#153158",
            },
          },
          data: this.list.map((v) => v.Name),
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "#153158",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#153158",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#d6e2ff",
            },
          },
        },
        series: [
          {
            type: "bar",
            name: "实存",
            color: "#0ff5f8",
            barWidth: 12,
            barGap: 0,
            data: this.list.map((i) => i.CountA),
          },
          {
            type: "bar",
            name: "帐存",
            color: "#20a5f7",
            barWidth: 12,
            data: this.list.map((i) => i.CountB),
          },
        ],
      };
      this.myChart.setOption(option);
    },
    getData() {
      this.$http
        .get(
          `/api/StocktakingAccountReport/StocktakingReportB/${
            this.chooseBatch || "11"
          }`
        )
        .then((res) => {
          this.list = res;
          this.initCharts();
        });
    },
    resize() {
      this.myChart.resize();
    },
  },
  watch: {
    chooseBatch() {
      this.getData();
    },
  },
};
</script>

<style>
</style>